<template>
  <div class="box-skin" :class="[type && `box-skin--${type}`]">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
defineProps({
  type: {
    type: String,
    default: "",
  },
});
</script>

<style scoped lang="scss">
@include b(box-skin) {
  background-color: $background-color-secondary;
  @include m(top) {
    border-top: $border-base;
  }
  @include m(bottom) {
    border-bottom: $border-base;
  }
}
</style>
